<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="name" />
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model="age" />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="add">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(obj, index) in list" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{obj.name}}</td>
                    <td>{{obj.age}}</td>
                    <td>{{obj.sex}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                        <button @click="edit(index)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name: "",
                age: "",
                sex: "",
                list: []
            }
        },
        methods: {
            add() {
                let obj = {
                    name: this.name,
                    age: this.age,
                    sex: this.sex
                }
                this.list.push(obj)
                this.name = this.age = this.sex = ''
            },
            del(i) {
                if (window.confirm('确定删除么?')) {
                    this.list.splice(i, 1)
                    this.name = this.age = this.sex = ''
                }
            },
            edit(index) {
                // 编辑 点击事件方法 -index(正在编辑的数据对象的索引值)
                let editObj = this.list[index]; // 把要编辑的对象信息取出来
                this.name = editObj.name;
                this.age = editObj.age;
                this.sex = editObj.sex;
                // this.editIndex = index; // 把正在编辑的索引值保存起来
            },
        }

    }
</script>